<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>打卡</title>

    <script src="/static/commonCss.js"></script>
    <script src="/static/commonJS.js"></script>

</head>
<body>

<div id="app">

<!--    <el-menu-->
<!--            class="el-menu-demo"-->
<!--            mode="horizontal"-->
<!--            background-color="#545c64"-->
<!--            text-color="#fff"-->
<!--            @select="handleSelect"-->
<!--    >-->
<!--        <el-sub-menu>-->
<!--            <template #title>菜单</template>-->
<!--            <el-menu-item index="">首页</el-menu-item>-->
<!--            <el-menu-item th:index="${'/clock/' + userId}">打卡</el-menu-item>-->
<!--            <el-menu-item th:index="${'/config/' + userId}">配置</el-menu-item>-->
<!--            <el-menu-item th:index="${'/history/' + userId}">请求历史</el-menu-item>-->
<!--        </el-sub-menu>-->
<!--    </el-menu>-->

    <div th:replace="~{/common/menu :: menu}"></div>

    <el-container style="height: 100%; width: 100%; padding-top: 60px">

<!--        <el-header style="padding: 0">-->
<!--&lt;!&ndash;            <div style="background-color: #606060; color: #ffffff; align-content: center">&ndash;&gt;-->
<!--&lt;!&ndash;                姓名: [[${userName}]]&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--        </el-header>-->
        <el-main style="margin-top: 50px">
            <el-button type="primary" circle
                       style="padding: 60px;
                       font-size: 20px"
                       @click="clock"
            >
                打卡
            </el-button>

            <div style="width:100%; padding-top: 50px">
                <span style="width:100%;">响应报文：</span>
                <div>
                    <el-input
                            :readonly="true"
                            v-model="responseText"
                            style="width: 80%; padding-top: 20px"
                            :autosize="{ minRows: 13, maxRows: 13 }"
                            type="textarea"
                    />
                </div>
            </div>
        </el-main>
    </el-container>

</div>

</body>

<script>

    const app = {
        mounted() {

        },
        data() {
            return {
                responseText: "",
                userId: [[${userId}]]
            }
        },
        methods: {
            selectMenu,
            clock() {
                this.responseText = "";
                const loading = startLoading();
                // 打卡
                axios.post("/api/clock")
                    .then(data => {
                        if (data.status == 200 && data.data.code == "200") {
                            data = data.data;
                            this.responseText = data.data;
                            loading.close();
                        } else {
                            showMessage("error", JSON.stringify(data.data ? data.data : data));
                            loading.close();
                        }
                    })
                    .catch((ex) => {
                        showMessage("error", JSON.stringify(ex));
                        loading.close();
                    })
            }
        }
    };

    bindApp("app", app);

</script>

</html>